<template>
  <sv-page>
    <view class="profession sv-uv-vtabs">
      <uv-vtabs :height="vtabHeight" :chain="false" :list="professionArr"
        keyName="profession_name" :current="curProfession" @change="changeTab">
        <uv-vtabs-item>
          <view class="lib-grid" v-if="libData.length > 0">
            <view class="lib-item" v-for="item in libData" :key="item.lib_id"
              @click="onLib(item)">
              <view class="lib-icon"></view>
              <view class="lib-name">{{ item?.lib_name }}</view>
            </view>
          </view>
          <view v-else class="lib-empty">
            <tn-empty mode="data" />
          </view>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
  </sv-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue';
import { useSysStore } from '@/store/sys';
import { professionList } from '@/service/api/profession';

const vtabHeight = computed(() => {
  const scHeight = uni.getSystemInfoSync().screenHeight
  const sysConfig = useSysStore().getConfig()
  return scHeight - sysConfig.navbarHeight + 'px'
})

const optionParams = ref({})

onLoad((options) => {
  optionParams.value = options
  getProfessionList()
})

const professionArr = ref([])
const curProfession = ref(0)
async function getProfessionList() {
  uni.showLoading({
    title: '加载中'
  })
  // 获取所有职业列表
  const professionRes = await professionList()
  professionArr.value = professionRes.data
  // 根据pid查找索引
  curProfession.value = professionArr.value.findIndex(item => item.profession_id === optionParams.value.pid)
  uni.hideLoading()
}

function changeTab(index) {
  curProfession.value = index;
}

const libData = computed(() => {
  return professionArr.value[curProfession.value]?.lib || []
})

function onLib(item) {
  uni.navigateTo({
    url: `/pages/lib/lib?lib_id=${item.lib_id}`
  });
}
</script>

<style lang="scss">
.profession {
  .lib-grid {
    padding: 24rpx;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .lib-item {
      .lib-icon {
        width: 100%;
        height: 120rpx;
        background-color: #66ccff;
        border-radius: 12rpx;
      }

      .lib-name {
        text-align: center;
        line-height: 2;
      }
    }
  }

  .lib-empty {
    height: v-bind(vtabHeight);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>